import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
class Sum extends Component{
    constructor(props){
        super(props);
        //在构造函数中，可以先创建ref,然后把此ref赋给类组件的实例属性
        this.num1Ref = React.createRef();//{current:null}
        this.num2Ref = React.createRef();//{current:null}
        this.resultRef = React.createRef();//{current:null}
    }
    handleClick= (event)=>{
        debugger
        //先获取第一个输入框的DOM元素，再获取它的值
        const num1 = this.num1Ref.current.value;
        //再获取第二个输入框的DOM元素，再获取它的值
        const num2 = this.num2Ref.current.value;
        const result = Number(num1)+Number(num2);
        //只能能通过ref.current获取DOM元素，你可以对它进行任意操作，比如绑定原生事件，获取焦点
        this.resultRef.current.value = result;
    }
    //ref={this.num1Ref} 如果给一个原生的DOM标签添加了一个ref属性的话，当此原生的DOM标签的真实DOM创建完成后
    //会把真实DOM传递给this.num1Ref.current
    render(){
        return (
            <div>
                <input ref={this.num1Ref}/>+<input ref={this.num2Ref}/>
                <button onClick={this.handleClick}>=</button>
                <input ref={this.resultRef}/>
            </div>
        )
    }
}
let element = <Sum />
root.render(element);
